<template>
  <view class="container">
    <view class="events-container" v-if="eventsInfo.list.length > 0">
      <view class="list-item" direction="row" v-for="item in eventsInfo.list" :key="item.id">
        <view class="main-content" @click="eventsDetail(item)">
          <view class="image-view">
            <image class="image-class" :src="item.imageUrl" />
          </view>
          <view class="text-view">
            <view class="view-title">
              <text>{{ item.eventsName }}</text>
            </view>
            <view class="view-date">
              <view class="text-date-title">
                报名时间：<span class="text-date">{{ item.signUpStartDate }}</span></view
              >
              <view class="text-date-title">
                活动时间：<span class="text-date"> {{ item.eventsStartDate }}</span></view
              >
            </view>
          </view>
        </view>
        <view class="line"></view>
        <view class="button-content">
          <view class="icon-view">
            <image class="image-class" src="https://img.qumoyugo.com/webimgbg/hot_registration_icon.png" />
            <view class="text-class"> 活动已结束</view>
          </view>
        </view>
      </view>

      <uni-load-more
        :status="reloadData.status"
        :icon-size="5"
        :content-text="reloadData.contentText"
        v-if="eventsInfo.list.length > 0"
      />
    </view>
    <view class="no-data" v-if="eventsInfo.list.length === 0">
      <EmptyBox title="暂无数据哦～" img="https://img.qumoyugo.com/webimgbg/pets-no-data-product.png"> </EmptyBox>
    </view>
  </view>
</template>
<script setup>
/* eslint-disable */
import { onLoad, onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'
import EmptyBox from '@/components/emptyBox'
import { ref, computed, getCurrentInstance } from 'vue'
const { $https } = getCurrentInstance().appContext.config.globalProperties
const reloadData = ref({
  reload: false,
  status: 'more',
  contentText: {
    contentdown: '上拉加载更多~',
    contentrefresh: '加载中',
    contentnomore: '我是有底线的~',
  },
})
const eventsInfo = ref({
  query: {
    page: 1,
    pageSize: 10,
    isHistory: true,
    eventsStatus: '1',
  },
  total: 0,
  list: [],
})

onLoad(options => {
  getEventsHistoryData()
})

// 下拉刷新，请求第一页
onPullDownRefresh(() => {
  eventsInfo.value.list = []
  eventsInfo.total = 0
  Promise.all([getEventsHistoryData()]).then(row => {
    uni.stopPullDownRefresh()
  })
})

// 上拉加载
onReachBottom(() => {
  if (eventsInfo.total > eventsInfo.value.list.length) {
    reloadData.value.status = 'loading'
    eventsInfo.value.query.page += 1
    getEventsHistoryData()
  } else {
    reloadData.value.status = 'no-more'
  }
})

const eventsDetail = data => {
  uni.navigateTo({ url: `/events/eventsDetail?id=${data.id}` })
}
// 获取活动列表数据
const getEventsHistoryData = () => {
  return new Promise((resolve, reject) => {
    $https({
      url: '/app/eventsInfo/page/list',
      type: '',
      method: 'get',
      data: eventsInfo.value.query,
    })
      .then(res => {
        if (res.code === 0 && res.data.items.length > 0) {
          eventsInfo.value.list = eventsInfo.value.list.concat(res.data.items)
          eventsInfo.total = res.data.pagination.total_record
          console.log(eventsInfo.list)
          if(!res.data.pagination.more){
            reloadData.value.status = 'no-more'
          }
        }
        resolve()
      })
      .catch(e => reject(e))
  })
}
</script>
<style lang="scss" scoped>
.container {
  background: #f4f4f4 !important;
  height: 1625rpx;
}
.events-container {
  background: #f4f4f4 !important;
  padding: 21rpx;
  padding-bottom: 120rpx;
}
.list-container {
  background: #f4f4f4 !important;
  margin: 21rpx;
  .uni-list {
    background: #f4f4f4 !important;
  }
}
.list-container.uni-list {
  background-color: #f4f4f4 !important;
}
.list-item {
  height: 361rpx;
  display: block;
  margin: 21rpx 0;
  flex-direction: row;
  align-items: center;
  border-radius: 18rpx;
  box-shadow: 0rpx 2rpx 3rpx 0rpx #e5e5e5;
  background-color: #ffffff;
  .main-content {
    height: 256rpx;
    display: flex;
    .image-view {
      display: flex;
      width: 200rpx;
      min-width: 200rpx;
      height: 188rpx;
      background: #f4f4f4;
      border-radius: 18rpx;
      margin: 28rpx;
      .image-class {
        width: 100%;
        height: 100%;
        background: #f4f4f4;
        border-radius: 18rpx;
      }
    }
    .text-view {
      display: block;
      height: 256rpx;
      width: 500rpx;
      .view-title {
        margin: 36rpx 0 56rpx 0;
        width: 90%;
        display: block;
        font-size: 32rpx;
        
        font-weight: 500;
        color: #333333;
        flex-direction: column;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .view-date {
        display: block;
        margin-top: 30rpx;
        font-size: 25rpx;
        
        font-weight: 400;
        color: #999999;
        line-height: 14rpx;
        .text-date-title {
          display: block;
          margin-top: 36rpx;
          .text-date {
            font-size: 25rpx;
            
            font-weight: 400;
            color: #333333;
            line-height: 14rpx;
          }
        }
      }
    }
  }
  .line {
    display: block;
    margin-top: 20rpx;
    height: 1rpx;
    background: #eeeeee;
  }
  .button-content {
    display: block;
    height: 105rpx;
    .icon-view {
      margin: 16rpx 28rpx;
      float: left;
      width: 40%;
      .image-class {
        float: left;
        width: 42rpx;
        height: 42rpx;
      }
      .text-class {
        margin-top: 4rpx;
        margin-left: 10rpx;
        float: left;
        font-size: 24rpx;
        
        font-weight: 500;
        color: #999999;
      }
    }
    .button-view {
      margin: 16rpx 28rpx;
      float: right;
      width: 139rpx;
      height: 49rpx;
      background: #525fa2;
      border-radius: 24rpx;
      font-size: 19rpx;
      
      font-weight: 500;
      color: #ffffff;
      line-height: 42rpx;
      text-align: center;
    }
  }
}
.no-data {
  text-align: center;
  color: #999999;
  padding: 100rpx 0;
  .img {
    width: 386rpx;
    height: 326rpx;
    margin-bottom: 20rpx;
  }
}
</style>
